<template>
    <div class="layout-head">
        <div class="logo">
            <span @click="jump('/')">BUG通缉录</span>
        </div>
        <ul>
            <!-- <li @click="jump('/')">主页</li> -->
            <li>
                <a href="http://www.sharekong.xyz" class="back-btn">返回博客</a>
            </li>
        </ul>
    </div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
    setup() {
        const router = useRouter()
        const jump = (path: string): void => {
            router.push(path)
        }

        return {
            jump,
        }
    }
})
</script>

<style lang='scss' scoped>
.layout-head {
    position: sticky;
    top: 0;
    height: 50px;
    // box-shadow: 0 0 10px #ddd;
    background-color: white;
    color: $color-1;
    display: flex;
    justify-content: space-between;
    padding: 0 50px;
    z-index: 999;
    ul {
        height: 100%;
        display: flex;
        align-items: center;
        li {
            cursor: pointer;
            width: 60px;
            text-align: center;
            .back-btn {
                // font-size: 12px;
                color: $color-2;
            }
        }
    }
    .logo {
        display: flex;
        align-items: center;
        font-weight: 600;
        font-size: 1.1rem;
        span {
            cursor: pointer;
        }
    }
}
</style>